<template>
  <div>
    <div class="wallet-bind">
      <div class="hint">
        <p class="yellow">温馨提示：</p>
        <p>支付宝账号绑定后不可变更，如果需要变更，请致电客服。</p>
      </div>
      <mt-field label="支付宝帐号：" placeholder="点击输入" v-model="alipay"></mt-field>
      <mt-field label="姓名：" placeholder="点击输入" v-model="full_name"></mt-field>
      <mt-button type="default" :disabled="isDisabled" @click.native="insertInfo">确 定</mt-button>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'
  
  export default {
    name: 'WalletBind',
    data () {
      return {
        alipay: '',
        full_name: ''
      }
    },
    computed: {
      isDisabled () {
        return this.alipay === '' || this.full_name === ''
      }
    },
    methods: {
      insertInfo () {
        let params = {
          alipay: this.alipay,
          name: this.full_name
        }
        this.$post('/vue/my/do_alipay_bind', params).then(data => {
          msg(data, () => {
            this.$router.go(-1)
          })
        })
      }
    }
  }
  const msg = (msg, callback) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
    setTimeout(() => {
      callback()
    }, 2000)
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .wallet-bind {
    background-color: rgb(240, 244, 247);
    min-height: 100vh;
    .hint {
      padding: 12px;
      font-size: 12px;
      text-align: left;
      .yellow {
        line-height: 24px;
        color: @c-yellow;
      }
      p {
        line-height: 20px;
        color: @c-169;
      }
    }
    .mint-cell {
      min-height: 48px;
      margin: 0 12px 16px;
      color: @c-124;
      border-radius: 24px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      .mint-cell-wrapper {
        font-size: 12px;
        padding: 0 16px;
        text-align: left;
        background-size: 100% 1px;
        .mint-cell-title {
          .mint-cell-text {
            line-height: 24px;
          }
        }
        .mint-cell-value {
          .mint-field-core {
            text-align: right;
            color: @c-blue;
            &::-webkit-input-placeholder {
              color: @c-169;
            }
          }
          .mint-field-other {
            img {
              width: 24px;
              height: 24px;;
            }
          }
        }
      }
    }
    .mint-button {
      margin: 8px 32px;
      width: 168px;
      height: 40px;
      border-radius: 20px;
      background-color: @c-blue;
      color: #FFF;
      font-size: 13px;
      line-height: 24px;
      border: 0;
      &.is-disabled {
        opacity: 1;
        background-color: @c-226;
      }
      &::after {
        border-radius: 20px;
      }
    }
  }
</style>